<template>
<div >
<div style=" margin-bottom:30px;text-align:center;">
<el-input suffix-icon="el-icon-search" placeholder="请输入商品名称" v-model="goodsName"  style="width:200px;" size="medium"></el-input>
<el-select suffix-icon="el-icon-loading" v-model="status" style="width:200px;" size="medium" placeholder="请输入状态" filterable>
        <el-option label="未上架" value="0"></el-option>
        <el-option label="已上架" value="1"></el-option>
      </el-select>
<el-button @click="search" style="margin-left:10px" type="primary" size="medium">搜索</el-button>
<el-button @click="reset" style="margin-left:10px" type="danger" size="medium">重置</el-button>
</div>
<div style="float:left;">
        <el-button type="success" size="medium" @click="handleAdd" style="margin-right:10px">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定批量删除这些数据吗？"
            @confirm="delBatch()"
        >
          <el-button type="danger" size="medium" slot="reference">批量删除 <i class="el-icon-delete-solid"></i></el-button>
        </el-popconfirm>
</div>

 <el-table
    :data="tableData"
    v-loading="loading"
    stripe
    style="width: 100%"
    tooltip-effect="dark"
    @selection-change="handleSelectionChange"
    >

    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="pic"
      label="宠物图片"
      >
<template slot-scope="scope">
<viewer>
<img :src="scope.row.pic" width="60px" />
</viewer>
</template>
  </el-table-column>
    <el-table-column
      prop="goodsName"
      label="商品名称"
      >
    </el-table-column>
    <el-table-column
      prop="goodsPice"
      label="商品价格"
      >
    </el-table-column>
     <el-table-column
      prop="stock"
      label="库存"
      >
    </el-table-column>
   <el-table-column
      prop="status"
      label="货物状态"
    >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === 0 ? 'success' : 'primary'"
          disable-transitions>{{scope.row.status === 0 ? '已下架' : '已上架'}}</el-tag>
      </template>
   </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.id)" type="text" size="small">编辑</el-button>
       <el-popconfirm
  confirm-button-text='确定'
  cancel-button-text='取消'
  icon="el-icon-info"
  icon-color="red"
  title="确定删除这段内容吗？"
  @confirm="deleteById(scope.row.id)"
>
  <el-button slot="reference" type="text"  style="margin-left:10px">删除</el-button>
</el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-empty :image-size="200" v-if="flag==false"></el-empty>

  <el-dialog  title="宠物信息" style="text-align:left" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/file/upload"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="form.pic" :src="form.pic" style="width:230px" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    <el-form-item label="商品名称" style="width:200px;">
      <el-input v-model="form.goodsName"  autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="库存"  style="width:200px;">
     <el-input v-model="form.stock"  autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="商品价格"  style="width:200px;">
     <el-input v-model="form.goodsPice"  autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="商品状态" style="width:200px;">
     <el-select v-model="form.status" placeholder="请选择商品状态" filterable>
        <el-option label="下架" value="0"></el-option>
        <el-option label="上架" value="1"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="back()">取 消</el-button>
    <el-button type="primary" @click="updateAdmin()">确 定</el-button>
  </div>
</el-dialog>
 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</div>
</template>

<script>

export default {
  name: 'GoodsView',
  data () {
    return {
      petType: '',
      status: '',
      flag: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      goodsName: '',
      multipleSelection: [],
      dialogFormVisible: false,
      loading: true,
      form: {
        id: '',
        goodsName: '',
        goodsPice: '',
        stock: '',
        status: '',
        pic: ''
      }
    }
  },
  computed: {
    isShow: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    handleAvatarSuccess (res) {
      this.form.pic = res
    },
    handleAdd () {
      this.$router.push('/home/addGoods')
    },
    showBigImage (src) {
      this.LicenseBigDialog = true
      this.imgSrc = src
    },
    delBatch () {
      const ids = this.multipleSelection.map(v => v.id)
      this.request.post('/goods/dels', ids).then(res => {
        if (res.code === '200') {
          this.$message({
            showClose: true,
            type: 'success',
            message: '操作成功'
          })
          this.loadGet()
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '网络异常,操作失败'
          })
        }
      })
    },
    deleteById (id) {
      this.request.post('/goods/delById/' + id).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    back () {
      this.form.id = ''
      this.form.goodsName = ''
      this.form.stock = ''
      this.form.goodsPice = ''
      this.form.status = ''
      this.dialogFormVisible = false
    },
    updateAdmin () {
      if (this.form.status === '下架') {
        this.form.status = 0
      } else if (this.form.status === '上架') {
        this.form.status = 1
      }
      this.request.post('/goods/update', this.form).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.error('网络异常，修改失败')
        }
      })
    },
    handleDelete (id) {
      this.request.post('/goods/delById/' + id).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.danger('网络异常，修改失败')
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(val)
    },
    reset () {
      this.goodsName = ''
      this.petType = ''
      this.status = ''
      this.loadGet()
    },
    search () {
      this.loadGet()
    },
    handleClick (id) {
      console.log(id)
      this.request.post('/goods/getGoods' + '/' + id
      ).then(res => {
        if (res.code === '200') {
          this.form = res.data
          if (res.data.status === 0) {
            this.form.status = '下架'
          } else {
            this.form.status = '上架'
          }
        } else {
          this.$message.danger('加载失败')
        }
      })
      this.dialogFormVisible = true
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.loadGet()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.loadGet()
    },
    async loadGet () {
      this.request('/goods/list', {
        params: {
          goodsName: this.goodsName,
          status: this.status,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.flag = true
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      })
    }
  },
  mounted () {
    this.loadGet()
  }
}
</script>

<style>
.div{
  margin-top:40px;
  margin-bottom: 20px;
}
</style>
